import React, { Component } from 'react'
import { Grid, List } from 'antd-mobile'
import PropTypes from 'prop-types'

class AvatarSelector extends Component {
  static propTypes = {
    selectAvatar: PropTypes.func.isRequired
  }
  constructor(props) {
    super(props);
    this.state = {}
  }
  render() {
    const avatar = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra'
    const avatarList = Array.from(avatar.split(',')).map(v => ({
      icon: require(`../img/${v}.png`).default,
      text: v
    }))
    const gridHeader = this.state.icon ? (
      <div>
        <span>已选择头像</span>
        <img src={this.state.icon} alt="已选择头像" style={{ with: 20 }}></img>
      </div>
    ) : <div>请选择头像</div>
    return (
      <div>
        <List renderHeader={() => gridHeader}>
          <Grid
            data={avatarList} columnNum={5}
            onClick={elm => {
              this.setState(elm)
              this.props.selectAvatar(elm.text)
            }}
          />
        </List>
      </div>
    )
  }
}

export default AvatarSelector
